<template>
  <!-- 组长调整路线 -->
  <view class="content">
    <view v-for="(item,index) in routeList" :key="index" style="width: 90%; margin: 0 auto;">
      <!-- 未开始路线 -->
      <view class="noStartList">
        <view class="listTitle">
          <view class="groupNum">
            {{ item.name }}
          </view>
          <view class="title">
            未开始路线
          </view>
        </view>
        <view class="routeList">
          <tui-drag ref="drag" :columns="columns" :itemHeight="itemHeight" :listData="item.unStartList"
                    :scrollTop="scrollTop" @change="change" @sortend="sortEnd">
            <template v-slot:default="{entity,height}">
              <view :style="{height:height+'rpx'}" class="routeItem">
                <view class="routeIndex">
                  {{ entity.sort }}
                </view>
                <view class="routeName">
                  {{ entity.name }}
                </view>
                <view class="selectIcon">
                  <image mode="aspectFit"
                         src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/selectRoute.png">
                  </image>
                </view>
              </view>
            </template>
          </tui-drag>
        </view>

        <!-- 无数据 -->
        <!-- <view class="" v-else>
          暂无数据
        </view> -->
      </view>
      <!-- 已开始路线 -->
      <view class="startedRouteList">
        <view class="listTitleStarted">
          <view class="groupNum">
            {{ item.name }}
          </view>
          <view class="title">
            已开始路线
          </view>
        </view>
        <view v-if="item.startList.length" class="startedRoute">
          <view v-for="(ite,index) in item.startList" :key="index" class="routeItemStarted">
            <view class="routeIndex">
              {{ ite.sort }}
            </view>
            <view class="routeName">
              {{ ite.name }}
            </view>
          </view>
        </view>
        <!--无数据 -->
        <view v-else class="">
          暂无数据
        </view>

      </view>

      <!-- 提交按钮 -->
      <view class="btnWarp">
        <view class="submit" @tap="adjustSequencePost">
          提交
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getSequence,
  adjustSequence
} from '@/api/tourplan.js'

export default {
  data() {
    return {
      routeList: [],
      itineraryId: 0, //行程id
      groupId: 0, //小组id
      itemHeight: 100,
      scrollTop: 0,
      columns: 1,
      topSize: 20,

    }
  },
  onLoad: function (options) {
    const that = this
    that.initData(options)
  },

  methods: {
    //初始化数据
    initData(options) {
      const that = this
      that.itineraryId = options.itineraryId
      that.groupId = options.groupId
      that.getSenicSequenceList(that.itineraryId)
    },
    //获取顺序列表
    getSenicSequenceList(itineraryId) {
      const that = this
      getSequence({
        itineraryId: itineraryId,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.routeList = res
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },
    //改变景点顺序
    adjustSequencePost() {
      const that = this
      const postList = []
      that.routeList[0].startList.forEach((item, index) => {
        postList.push({
          scenicId: item.id,
          groupId: item.groupId,
          sort: index + 1
        })
      })
      that.routeList[0].unStartList.forEach(item => {
        postList.push({
          scenicId: item.id,
          groupId: item.groupId,
          sort: item.sort
        })
      })
      adjustSequence(postList).then(res => {
        that.getSenicSequenceList(that.itineraryId)
        uni.showToast({
          icon: 'none',
          title: '提交成功'
        });
      }).catch(err => {
        uni.showToast({
          title: err,
          icon: 'none',
          duration: 3000
        })
      })
    },

    sortEnd(e) {
      const that = this
      console.log('sortEnd', e.listData);
      const newList = e.listData
      const ids = that.routeList[0].startList.length
      newList.forEach((item, index) => {
        item.sort = ids + index + 1; // 更新每个元素的 sort 属性为它的索引值
      })
      that.routeList[0].unStartList = newList
    },
    change(e) {
      console.log('change', e.listData);
    }

  }
}
</script>


<style>
@import url('adjustRoute.css');
</style>
